feat: add Rslib Solid examples#476
Conversation
|
Adding the Solid v2 beta example introduces |
📝 WalkthroughWalkthroughThe pull request updates 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
rslib/solid-rstest/src/Button.tsx (1)
12-18: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winConsider spreading rest props for better composability.
The component only accepts its declared props. It cannot be disabled, receive additional ARIA attributes, or handle data-testid. For a reusable library component, forward remaining props to the underlying
<button>.export const Button: Component<ButtonProps> = ({ primary = false, size = 'medium', backgroundColor, label, onClick, + ...rest }) => {And spread them on the element:
<button type="button" class={`demo-button demo-button--${size} ${mode}`} style={{ 'background-color': backgroundColor }} onClick={onClick} + {...rest} >🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@rslib/solid-rstest/src/Button.tsx` around lines 12 - 18, The Button component currently only destructures its declared props, so it drops useful passthrough attributes like disabled, ARIA props, and data-testid. Update the ButtonProps/Button signature in Button so it accepts the remaining button attributes, then forward those rest props onto the underlying button element while keeping the existing primary, size, backgroundColor, label, and onClick behavior intact.rslib/solid-rstest/tsconfig.json (1)
14-14: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winInclude the project-local test and config files in
tsconfig.json.
Right now onlysrcis covered, sotests/index.test.tsx,rslib.config.ts, andrstest.config.tssit outside this package config and won’t get editor ortsc -pcoverage.Suggested change
- "include": ["src"] + "include": ["src", "tests", "rslib.config.ts", "rstest.config.ts"]🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@rslib/solid-rstest/tsconfig.json` at line 14, The tsconfig for solid-rstest only includes src, so project-local test and config files are excluded from TypeScript/editor coverage. Update the include list in tsconfig.json to cover the package’s tests/index.test.tsx and the local config entry points rslib.config.ts and rstest.config.ts, keeping the change scoped to the tsconfig include settings.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@rslib/solid-rstest/src/button.css`:
- Around line 1-8: The .demo-button stylesheet is missing visible keyboard focus
styling, so add a :focus-visible rule for the demo-button selector to provide a
clear outline and offset. Update the button CSS in the existing .demo-button
block by adding a dedicated focus-visible state so keyboard users can see when
the button is focused.
In `@rslib/solid-rstest/tests/index.test.tsx`:
- Around line 5-22: Add cleanup to the Solid testing setup so rendered DOM does
not leak between tests; update the test around render/screen.getByText in
index.test.tsx to call cleanup after each test, or register global cleanup via
afterEach(cleanup) in the shared test setup using `@rstest/core` and
`@solidjs/testing-library`.
---
Nitpick comments:
In `@rslib/solid-rstest/src/Button.tsx`:
- Around line 12-18: The Button component currently only destructures its
declared props, so it drops useful passthrough attributes like disabled, ARIA
props, and data-testid. Update the ButtonProps/Button signature in Button so it
accepts the remaining button attributes, then forward those rest props onto the
underlying button element while keeping the existing primary, size,
backgroundColor, label, and onClick behavior intact.
In `@rslib/solid-rstest/tsconfig.json`:
- Line 14: The tsconfig for solid-rstest only includes src, so project-local
test and config files are excluded from TypeScript/editor coverage. Update the
include list in tsconfig.json to cover the package’s tests/index.test.tsx and
the local config entry points rslib.config.ts and rstest.config.ts, keeping the
change scoped to the tsconfig include settings.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 1f60a480-89e3-477c-aca6-fdc4624a1361
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (20)
rslib/solid-basic/.gitignorerslib/solid-basic/README.mdrslib/solid-basic/package.jsonrslib/solid-basic/rslib.config.tsrslib/solid-basic/src/Button.tsxrslib/solid-basic/src/button.cssrslib/solid-basic/src/index.tsxrslib/solid-basic/tsconfig.jsonrslib/solid-rstest/.gitignorerslib/solid-rstest/README.mdrslib/solid-rstest/package.jsonrslib/solid-rstest/rslib.config.tsrslib/solid-rstest/rstest.config.tsrslib/solid-rstest/src/Button.tsxrslib/solid-rstest/src/button.cssrslib/solid-rstest/src/index.tsxrslib/solid-rstest/tests/index.test.tsxrslib/solid-rstest/tsconfig.jsonrslib/solid/rslib.config.tsrslib/solid/src/index.tsx
💤 Files with no reviewable changes (2)
- rslib/solid/src/index.tsx
- rslib/solid/rslib.config.ts
| .demo-button { | ||
| font-weight: 700; | ||
| border: 0; | ||
| border-radius: 3em; | ||
| cursor: pointer; | ||
| display: inline-block; | ||
| line-height: 1; | ||
| } |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Add :focus-visible styles for keyboard accessibility.
The button lacks visible focus indicators. Without :focus-visible or :focus styles, keyboard users cannot determine when the button has focus.
.demo-button:focus-visible {
outline: 2px solid `#1ea7fd`;
outline-offset: 2px;
}Alternatively, if you want focus to match the primary color dynamically:
.demo-button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@rslib/solid-rstest/src/button.css` around lines 1 - 8, The .demo-button
stylesheet is missing visible keyboard focus styling, so add a :focus-visible
rule for the demo-button selector to provide a clear outline and offset. Update
the button CSS in the existing .demo-button block by adding a dedicated
focus-visible state so keyboard users can see when the button is focused.
| test('The button should handle click events', () => { | ||
| let count = 0; | ||
| render(() => ( | ||
| <Button | ||
| backgroundColor="#ccc" | ||
| label="Demo Button" | ||
| onClick={() => { | ||
| count += 1; | ||
| }} | ||
| /> | ||
| )); | ||
|
|
||
| const button = screen.getByText('Demo Button') as HTMLButtonElement; | ||
|
|
||
| expect(count).toBe(0); | ||
| button.click(); | ||
| expect(count).toBe(1); | ||
| }); |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟠 Major | ⚡ Quick win
Add cleanup after render to prevent test pollution.
@solidjs/testing-library typically requires cleanup() after each test to remove rendered DOM and avoid state leakage between tests. Without it, subsequent tests may fail due to multiple matching elements or accumulated event listeners.
import { render, screen } from '`@solidjs/testing-library`';
import { expect, test } from '`@rstest/core`';
import { Button } from '../src';
+import { cleanup } from '`@solidjs/testing-library`';
test('The button should handle click events', () => {
let count = 0;
render(() => (
<Button
backgroundColor="`#ccc`"
label="Demo Button"
onClick={() => {
count += 1;
}}
/>
));
const button = screen.getByText('Demo Button') as HTMLButtonElement;
expect(count).toBe(0);
button.click();
expect(count).toBe(1);
+
+ cleanup();
});Alternatively, configure global cleanup in a setup file:
import { afterEach } from '`@rstest/core`';
import { cleanup } from '`@solidjs/testing-library`';
afterEach(cleanup);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@rslib/solid-rstest/tests/index.test.tsx` around lines 5 - 22, Add cleanup to
the Solid testing setup so rendered DOM does not leak between tests; update the
test around render/screen.getByText in index.test.tsx to call cleanup after each
test, or register global cleanup via afterEach(cleanup) in the shared test setup
using `@rstest/core` and `@solidjs/testing-library`.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
rslib/solid-rstest/package.json (1)
7-10: 🗄️ Data Integrity & Integration | 🔵 Trivial | ⚡ Quick winMove
typesbeforesolidin the exports conditions map.TypeScript and Node match export conditions in order, so
solidwill short-circuit resolution beforetypesfor consumers usingcustomConditions: ["solid"]. That can skip the declaration file for this entry.♻️ Proposed reorder
".": { - "solid": "./dist/index.jsx", "types": "./dist/index.d.ts", + "solid": "./dist/index.jsx", "import": "./dist/index.js" }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@rslib/solid-rstest/package.json` around lines 7 - 10, Reorder the exports conditions map in the package.json exports entry so the types condition is listed before solid, since resolution order matters and customConditions ["solid"] can otherwise bypass the declaration file. Update the export object for this entry by moving the types condition ahead of solid while keeping the existing targets unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@rslib/solid-rstest/package.json`:
- Around line 7-10: Reorder the exports conditions map in the package.json
exports entry so the types condition is listed before solid, since resolution
order matters and customConditions ["solid"] can otherwise bypass the
declaration file. Update the export object for this entry by moving the types
condition ahead of solid while keeping the existing targets unchanged.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 4c66ce91-f7f1-4602-8765-fb1faa7dff6d
📒 Files selected for processing (4)
rslib/solid-basic/package.jsonrslib/solid-basic/rslib.config.tsrslib/solid-rstest/package.jsonrslib/solid-rstest/rslib.config.ts
💤 Files with no reviewable changes (2)
- rslib/solid-basic/rslib.config.ts
- rslib/solid-rstest/rslib.config.ts
Summary
This PR adds 2 Rslib Solid examples: